<template>
	<view class="earning-dar">
		<view class="banner">
			<view class="date">
				<!-- #ifdef APP-PLUS || H5 -->
				<picker fields="day" mode="date" :value="date"  @change="bindDateChange">
				    <view class="uni-input">{{date}} <image class="down" src="../../static/images/earning/down.svg" mode=""></image></view>
				</picker>
				
				<!-- #endif -->
				<!-- #ifndef APP-PLUS || H5 -->
				<xbd-date-picker fields="day" :date="date" :visible.sync="visible" @setDate="setDateChange">
					<template>
						<view class="uni-input" @click="visible = true">
							<text>{{ date }}</text>
							<image class="down" src="../../static/images/earning/down.svg" mode=""></image>
						</view>
					</template>
				</xbd-date-picker>
				<!-- #endif -->

			</view>
			<view class="number">
				{{itemInfo.total?  itemInfo.total:0 | priceFormat(2,'',true)}}
			</view>
			<view class="tag">
				合计
			</view>
		</view>
		<view class="list">
			<view class="box" v-for="(item,index) in itemInfo.detail" :key="index">
				<view class="left">
					{{item.key}}
				</view>
				<view class="right">
					{{item.value}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemInfo: Object,
		},
		data() {
			 const currentDate = this.getDate({
			            format: true
			        })
			return {
				date:currentDate,
				visible:false,
			}
		},
		methods: {
			setDateChange(date){
				this.date = date;
				uni.$emit('changeday', date);
			},
			bindDateChange: function(e) {
			    this.date = e.target.value
				uni.$emit('changeday', e.target.value);
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
			
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
				if (day === 1){
					var preDate = new Date(date.getTime() - 24*60*60*1000)
					day = preDate.getDate()
					month = month - 1
				}
				if (month === 0){
					year = year - 1
					month = 12
				}
				month = month > 9 ? month : '0' + month ;
				day = (day-1) > 9 ? day-1 : '0' + (day-1);
			    return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner{
		box-sizing: border-box;
		padding: 30px 0;
		display: flex;
		width: 750rpx;
		height: 142px;
		background: url('../../static/images/earning/earningsBanner.png') no-repeat;
		background-size: 100% 100%;
		align-items: center;
		flex-flow: column;
		/* #ifdef APP-PLUS || H5 */
		.down{
			margin-left: 20rpx;
			width: 28rpx;
			height: 28rpx;
			vertical-align: sub;
		}
		/* #endif */
		/* #ifndef APP-PLUS || H5 */
		.down{
			margin-left: 20rpx;
			width: 20rpx;
			height: 20rpx;
		}
		/* #endif */
		.date{
			font-size: 28rpx;
			color: #FFFFFF;
		}
		.number{
			margin-top: 20px;
			color: #FFFFFF;
			font-size: 36rpx;
			margin-bottom: 12px;
		}
		.tag{
			font-size: 28rpx;
			color: #CED9F4 ;
		}
	}
	.list{
		background-color: #FFFFFF;
		width: 750rpx;
		box-sizing: border-box;
		padding: 0 50rpx ;
		font-size: 28rpx;
		.box{
			display: flex;
			justify-content: space-between;
			height: 54px;
			line-height: 54px;
			border-bottom: 1px solid #F8F8F8;
			.left{
				color: #999999;
			}
			.right{
				color: #394954 ;
				
			}
				
			&:nth-last-child(1) {
				.right{
					color: #FAC52A !important;
				}
			}
		}
	}
</style>
